<!-- CustomModal.vue -->
<template>
  <uModal
    v-model="visible"
    :title="title"
    width="70%"
    :show-cancel-button="showCancelButton"
    @confirm="handleConfirm"
    @cancel="handleCancel"
    :mask-close-able="maskCloseAble"
  >
    <view class="custom-modal-content">
      <view>
        <image class="image-icon" :src="src" mode="aspectFill"></image>
      </view>
      {{ message }}</view
    >
  </uModal>
</template>
  
  
  <script>
import uModal from "@/pages/mes/components/uModal.vue";
export default {
  components: {
    uModal,
  },
  name: "CustomModal",
  props: {
    initialMessage: String,
    //   visible: {
    //     type: Boolean,
    //     default: true
    //   },
    title: {
      type: String,
      default: " ",
    },
    showCancelButton: {
      type: Boolean,
      default: true,
    },
    maskCloseAble: {
      type: Boolean,
      default: true,
    },
    src: {
      type: String,
      default: "/static/staticKst/wenhao.png",
    },
  },
  data() {
    return {
      message: this.initialMessage,
      result: null,
      visible: true,
    };
  },
  created() {
    console.log("CustomModal created",this.visible);
  },
  methods: {
    handleCancel() {
      // this.$emit('close', false);
      // 传递给父组件
      console.log("handleCancel");
      this.$emit("update:close", false);
    },
    handleConfirm() {
      // this.$emit('close', true);
      // 传递给父组件
      console.log("handleConfirm");
      this.$emit("update:close", true);
    },
  },
};
</script>
  <style lang="scss" scoped>
.custom-modal-content {
  padding: 20px;
  text-align: center;
  // 上下居中
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  flex-wrap: nowrap;
  font-size: 36rpx;
  height: 280rpx;
}
.image-icon{
  width: 80rpx;
  height: 80rpx;
  margin:20rpx;

}
</style>